<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '商品管理'}, {name: '商品分类'}]"></v-breadcrumb>

        <div class="g-box" style="min-height:600px;">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100" @click="add(0)">
                    新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list"
                      default-expand-all :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="120"></el-table-column>
                <el-table-column prop="name" label="分类名称"></el-table-column>
                <el-table-column label="是否显示" width="150">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" v-if="scope.row.client_show==1" type="success" plain>
                            显示到小程序
                        </el-button>
                        <el-button v-preventDbClick size="mini" v-if="scope.row.client_show==2" type="danger" plain>
                            小程序不显示
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" v-if="scope.row.status==1" type="success" plain>正常
                        </el-button>
                        <el-button v-preventDbClick size="mini" v-if="scope.row.status==2" type="danger" plain>禁用
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="100"></el-table-column>
                <el-table-column fixed="right" border width="120" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="编辑" @click="edit(scope.row)"
                                   type="primary" icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除"
                                   @click="del(scope.row.id)" type="warning" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="editId?'编辑':'添加'" width="500px" :visible.sync="addDialogIsShow">
            <div class="add-box">
                <div class="flex-center mb-15">
                    <span class="span">分类名称</span>
                    <el-input placeholder="请输入" class="width-350" v-model="addobj.name"></el-input>
                </div>
                <div class="flex-center mb-15">
                    <span class="span">是否显示</span>
                    <el-select v-model="addobj.client_show" class="width-350" placeholder="请选择">
                        <el-option label="显示到小程序" :value="1"></el-option>
                        <el-option label="小程序不显示" :value="2"></el-option>
                    </el-select>
                </div>
                <div class="flex-center mb-15">
                    <span class="span">状态</span>
                    <el-select v-model="addobj.status" class="width-350" placeholder="请选择">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="禁用" :value="2"></el-option>
                    </el-select>
                </div>
                <div class="flex-center">
                    <span class="span">排序</span>
                    <el-input placeholder="数值越大，越靠前" class="width-350" v-model="addobj.sort"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button v-preventDbClick @click="addDialogIsShow=false">取 消</el-button>
        <el-button v-preventDbClick type="primary" @click="submit">确 定</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            list: [],
            editId: 0,
            addDialogIsShow: false,
            addobj: {
                name: '',
                status: 1,
                sort: '',
                client_show: 1
            },
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.getData();
    },

    methods: {
        getData() {
            request({
                url: '/manage/goodsCategory/all',
            }).then((res) => {
                this.list = res.data;
            })
        },

        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/goodsCategory/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        add() {
            this.editId = 0;
            this.addobj.name = '';
            this.addobj.status = 1;
            this.addobj.sort = '';
            this.addobj.client_show = 1;
            this.addDialogIsShow = true;
        },

        edit(item) {
            this.editId = item.id;
            this.addobj.name = item.name;
            this.addobj.status = item.status;
            this.addobj.sort = item.sort;
            this.addobj.client_show = item.client_show;
            this.addDialogIsShow = true;
        },

        submit() {
            let addobj = Object.assign({}, this.addobj);
            if (this.editId) {
                addobj.id = this.editId;
                request({
                    url: '/manage/goodsCategory/edit',
                    data: addobj
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.addDialogIsShow = false;
                        this.getData();
                    })
                })
            } else {
                request({
                    url: '/manage/goodsCategory/add',
                    data: addobj
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.addDialogIsShow = false;
                        this.getData();
                    })
                })
            }
        }
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
